സിഎസ്എസ് ഫ്ലെക്സ്ബോക്സ് വൈദഗ്ദ്ധ്യം: അഡ്വാൻസ്ഡ് അലൈൻമെൻ്റും ഡിസ്ട്രിബ്യൂഷനും

വർഷങ്ങളായി, ആധുനിക വെബ് ലേഔട്ടിൻ്റെ ഒരു ആണിക്കല്ലാണ് സിഎസ്എസ് ഫ്ലെക്സ്ബോക്സ്. മിക്ക ഡെവലപ്പർമാരും ഒരു വരിയിൽ ഐറ്റംസ് ക്രമീകരിക്കുന്നതിനോ ലളിതമായ സെൻ്റർ ചെയ്ത ഘടകങ്ങൾ നിർമ്മിക്കുന്നതിനോ display: flex ഉപയോഗിക്കാൻ സൗകര്യപ്രദരാണ്. എന്നിരുന്നാലും, ഫ്ലെക്സ്ബോക്സിലെ യഥാർത്ഥ വൈദഗ്ദ്ധ്യം, അതിൻ്റെ അഡ്വാൻസ്ഡ് അലൈൻമെൻ്റിനും ഡൈനാമിക് ഡിസ്ട്രിബ്യൂഷനുമുള്ള കൂടുതൽ സൂക്ഷ്മമായ പ്രോപ്പർട്ടികൾ മനസ്സിലാക്കുന്നതിലാണ്. justify-content: center, align-items: center എന്നിവയുടെ അടിസ്ഥാനങ്ങൾക്കപ്പുറത്തേക്ക് നിങ്ങൾ നീങ്ങുമ്പോൾ, സങ്കീർണ്ണവും പ്രതികരിക്കുന്നതും സ്വാഭാവികമായി ഫ്ലെക്സിബിളുമായ ലേഔട്ടുകൾ അതിശയകരമായ എളുപ്പത്തിൽ സൃഷ്ടിക്കാനുള്ള ശക്തി നിങ്ങൾ തുറക്കുന്നു.

അടിസ്ഥാനകാര്യങ്ങൾ അറിയാവുന്നതും എന്നാൽ തങ്ങളുടെ ധാരണ ആഴത്തിലാക്കാൻ ആഗ്രഹിക്കുന്നതുമായ ഡെവലപ്പർമാർക്കുള്ളതാണ് ഈ ഗൈഡ്. മൾട്ടി-ലൈൻ അലൈൻമെൻ്റ് നിയന്ത്രിക്കുന്ന പ്രോപ്പർട്ടികൾ, ഫ്ലെക്സ് ഐറ്റംസ് എങ്ങനെ വളരുകയും ചുരുങ്ങുകയും ചെയ്യുന്നു എന്നതിൻ്റെ പിന്നിലെ സങ്കീർണ്ണമായ ലോജിക്, സാധാരണ ലേഔട്ട് വെല്ലുവിളികൾ പരിഹരിക്കുന്ന നിരവധി ശക്തമായ പാറ്റേണുകൾ എന്നിവ നമ്മൾ പര്യവേക്ഷണം ചെയ്യും. ഒരു സാധാരണ ഉപയോക്താവിൽ നിന്ന് ആത്മവിശ്വാസമുള്ള ഒരു ഫ്ലെക്സ്ബോക്സ് ആർക്കിടെക്റ്റായി മാറാൻ തയ്യാറെടുക്കുക.

അടിസ്ഥാനം: മെയിൻ, ക്രോസ് ആക്സിസുകളെക്കുറിച്ചുള്ള ഒരു ദ്രുത ഓർമ്മപ്പെടുത്തൽ

അഡ്വാൻസ്ഡ് വിഷയങ്ങളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, എല്ലാ ഫ്ലെക്സ് കണ്ടെയ്‌നറുകളെയും നിയന്ത്രിക്കുന്ന രണ്ട് ആക്സിസുകളെക്കുറിച്ച് വ്യക്തമായ ധാരണയുണ്ടായിരിക്കേണ്ടത് അത്യാവശ്യമാണ്. ഫ്ലെക്സ്ബോക്സിലെ എല്ലാ അലൈൻമെൻ്റ്, ഡിസ്ട്രിബ്യൂഷൻ പ്രോപ്പർട്ടികളും ഈ രണ്ട് ആക്സിസുകളിൽ ഒന്നിൽ പ്രവർത്തിക്കുന്നു.

• മെയിൻ ആക്സിസ്: ഫ്ലെക്സ് ഐറ്റംസ് ലേഔട്ട് ചെയ്യുന്ന പ്രാഥമിക ആക്സിസ് ഇതാണ്. ഇതിൻ്റെ ദിശ flex-direction പ്രോപ്പർട്ടി നിർവചിക്കുന്നു.
• ക്രോസ് ആക്സിസ്: ഈ ആക്സിസ് എപ്പോഴും മെയിൻ ആക്സിസിന് ലംബമായിരിക്കും.

പ്രധാന കാര്യം, ഈ ആക്സിസുകൾ സ്ഥിരമല്ല എന്നതാണ്. നിങ്ങളുടെ flex-direction മൂല്യത്തെ അടിസ്ഥാനമാക്കി അവ സ്വയം പുനഃക്രമീകരിക്കുന്നു:

• flex-direction: row (ഡിഫോൾട്ട്): മെയിൻ ആക്സിസ് തിരശ്ചീനവും (ഇടത്തുനിന്ന്-വലത്തോട്ട്), ക്രോസ് ആക്സിസ് ലംബവുമാണ് (മുകളിൽ-നിന്ന്-താഴേക്ക്).
• flex-direction: column: മെയിൻ ആക്സിസ് ലംബമായി (മുകളിൽ-നിന്ന്-താഴേക്ക്) മാറുന്നു, ക്രോസ് ആക്സിസ് തിരശ്ചീനമായി (ഇടത്തുനിന്ന്-വലത്തോട്ട്) മാറുന്നു.
• flex-direction: row-reverse: മെയിൻ ആക്സിസ് തിരശ്ചീനമാണ്, എന്നാൽ വലത്തുനിന്ന്-ഇടത്തോട്ടാണ് പ്രവർത്തിക്കുന്നത്.
• flex-direction: column-reverse: മെയിൻ ആക്സിസ് ലംബമാണ്, എന്നാൽ താഴെനിന്ന്-മുകളിലേക്കാണ് പ്രവർത്തിക്കുന്നത്.

ഈ അടിസ്ഥാന ആശയം മറക്കുന്നത് മിക്ക ഫ്ലെക്സ്ബോക്സ് ആശയക്കുഴപ്പങ്ങൾക്കും കാരണമാകുന്നു. ഒരു അലൈൻമെൻ്റ് പ്രോപ്പർട്ടി പ്രയോഗിക്കുന്നതിന് മുമ്പ് എപ്പോഴും സ്വയം ചോദിക്കുക: "എൻ്റെ മെയിൻ ആക്സിസ് ഏത് ദിശയിലേക്കാണ് വിരൽ ചൂണ്ടുന്നത്?"

justify-content ഉപയോഗിച്ച് മെയിൻ ആക്സിസ് ഡിസ്ട്രിബ്യൂഷനിൽ വൈദഗ്ദ്ധ്യം നേടുന്നു

മെയിൻ ആക്സിസിൽ ഫ്ലെക്സ് ഐറ്റംസിൻ്റെ ഇടയിലും ചുറ്റിലുമുള്ള സ്പേസ് എങ്ങനെ വിതരണം ചെയ്യണമെന്ന് justify-content പ്രോപ്പർട്ടി നിയന്ത്രിക്കുന്നു. flex-start, flex-end, center എന്നിവ ലളിതമാണെങ്കിലും, യഥാർത്ഥ ശക്തി സ്പേസ്-ഡിസ്ട്രിബ്യൂഷൻ മൂല്യങ്ങളിലാണ്.

സ്പേസ് ഡിസ്ട്രിബ്യൂഷൻ്റെ ആഴത്തിലുള്ള കാഴ്ച

space-between, space-around, space-evenly എന്നിവ തമ്മിലുള്ള സൂക്ഷ്മവും എന്നാൽ നിർണായകവുമായ വ്യത്യാസങ്ങൾ നമുക്ക് വ്യക്തമാക്കാം.

• justify-content: space-between;

  ഈ മൂല്യം മെയിൻ ആക്സിസിൽ ഐറ്റംസ് തുല്യമായി വിതരണം ചെയ്യുന്നു. ആദ്യത്തെ ഐറ്റം കണ്ടെയ്‌നറിൻ്റെ തുടക്കത്തിലേക്കും അവസാനത്തെ ഐറ്റം അതിൻ്റെ അവസാനത്തിലേക്കും തള്ളപ്പെടുന്നു. ശേഷിക്കുന്ന എല്ലാ സ്പേസും ഐറ്റംസിൻ്റെ ഇടയിൽ തുല്യമായി വിഭജിക്കപ്പെടുന്നു. പുറം അരികുകളിൽ സ്പേസ് ഉണ്ടാകില്ല.

  ഉപയോഗം: നാവിഗേഷൻ ബാറുകൾക്ക് അനുയോജ്യമാണ്, അവിടെ നിങ്ങൾക്ക് ലോഗോ ഇടതുവശത്തും ലിങ്കുകൾ വലതുവശത്തും ലിങ്കുകൾക്കിടയിൽ തുല്യമായ അകലത്തിലും വേണം.

• justify-content: space-around;

  ഈ മൂല്യം ഓരോ ഐറ്റത്തിനും ചുറ്റും തുല്യമായ സ്പേസ് നൽകി വിതരണം ചെയ്യുന്നു. ഓരോ ഐറ്റത്തിനും അതിൻ്റെ ഇടത്തും വലത്തും ഒരു "സ്പേസ് ബബിൾ" ഉണ്ടെന്ന് കരുതുക. അടുത്തുള്ള ഐറ്റംസിൻ്റെ ബബിളുകൾ കൂടിച്ചേരുമ്പോൾ, അവയ്ക്കിടയിലുള്ള സ്പേസ് കണ്ടെയ്‌നറിൻ്റെ അരികുകളിലുള്ള സ്പേസിൻ്റെ ഇരട്ടിയായി കാണപ്പെടും. പ്രത്യേകിച്ചും, പുറം അരികുകളിലുള്ള സ്പേസ് ഐറ്റംസിൻ്റെ ഇടയിലുള്ള സ്പേസിൻ്റെ പകുതിയായിരിക്കും.

  ഉപയോഗം: കാർഡ് ലേഔട്ടുകൾക്കോ ഗാലറികൾക്കോ ഉപയോഗപ്രദമാണ്, അവിടെ ഐറ്റംസിന് കണ്ടെയ്‌നറിൻ്റെ അരികുകളിൽ നിന്ന് അല്പം അകലം വേണം, പക്ഷേ അവയോട് ചേർന്ന് നിൽക്കാനും പാടില്ല.

• justify-content: space-evenly;

  ഇവ മൂന്നിലും ഏറ്റവും ലളിതമായി മനസ്സിലാക്കാവുന്നതാണിത്. ഏതെങ്കിലും രണ്ട് ഐറ്റംസിൻ്റെ ഇടയിലുള്ള സ്പേസ്, ആദ്യത്തെ/അവസാനത്തെ ഐറ്റത്തിനും കണ്ടെയ്‌നർ അരികിനും ഇടയിലുള്ള സ്പേസിന് തുല്യമാണെന്ന് ഇത് ഉറപ്പാക്കുന്നു. എല്ലാ വിടവുകളും ഒരുപോലെയായിരിക്കും.

  ഉപയോഗം: നിങ്ങൾക്ക് തികച്ചും സന്തുലിതവും സമമിതിവുമായ ഒരു ലേഔട്ട് ആവശ്യമുള്ളപ്പോൾ അനുയോജ്യമാണ്. "തുല്യമായ അകലം" ആവശ്യപ്പെടുമ്പോൾ ഡിസൈനർമാർ പലപ്പോഴും പരോക്ഷമായി ആഗ്രഹിക്കുന്നത് ഇതാണ്.

align-items, align-self എന്നിവ ഉപയോഗിച്ച് ക്രോസ് ആക്സിസ് അലൈൻമെൻ്റ് കീഴടക്കുന്നു

justify-content മെയിൻ ആക്സിസ് കൈകാര്യം ചെയ്യുമ്പോൾ, align-items ഒരു ലൈനിനുള്ളിൽ ക്രോസ് ആക്സിസിൽ ഐറ്റംസിൻ്റെ ഡിഫോൾട്ട് അലൈൻമെൻ്റ് നിയന്ത്രിക്കുന്നു.

`align-items` മൂല്യങ്ങൾ മനസ്സിലാക്കുന്നു

• align-items: stretch; (ഡിഫോൾട്ട്): ഇതുകൊണ്ടാണ് നിങ്ങളുടെ ഫ്ലെക്സ് ഐറ്റംസ് നിങ്ങൾ ആവശ്യപ്പെടാതെ തന്നെ കണ്ടെയ്‌നറിൻ്റെ ഉയരം നിറയ്ക്കുന്നതായി തോന്നുന്നത്. ഐറ്റംസ് ക്രോസ് ആക്സിസിൽ കണ്ടെയ്‌നറിൻ്റെ വലുപ്പം നിറയ്ക്കാൻ നീളും (ഉദാഹരണത്തിന്, ഒരു flex-direction: row കണ്ടെയ്‌നറിലെ ഉയരം).
• align-items: flex-start;: ഐറ്റംസ് ക്രോസ് ആക്സിസിൻ്റെ തുടക്കത്തിലേക്ക് ചേർത്ത് വെക്കുന്നു.
• align-items: flex-end;: ഐറ്റംസ് ക്രോസ് ആക്സിസിൻ്റെ അവസാനത്തിലേക്ക് ചേർത്ത് വെക്കുന്നു.
• align-items: center;: ഐറ്റംസ് ക്രോസ് ആക്സിസിൽ മധ്യഭാഗത്തായി ക്രമീകരിക്കുന്നു.
• align-items: baseline;: ഇത് ശക്തവും എന്നാൽ അധികം ഉപയോഗിക്കാത്തതുമായ ഒരു മൂല്യമാണ്. ഐറ്റംസ് അവയുടെ ടെക്സ്റ്റ് ബേസ്‌ലൈനുകൾ ഒരേ നിരപ്പിൽ വരുന്ന രീതിയിൽ ക്രമീകരിക്കുന്നു. വ്യത്യസ്ത ഫോണ്ട് വലുപ്പങ്ങളുള്ള ഐറ്റംസ് (ഉദാഹരണത്തിന്, ഒരു പ്രധാന തലക്കെട്ടിനൊപ്പം ഒരു ഉപശീർഷകം) ഉള്ളപ്പോൾ ഇത് വളരെ ഉപയോഗപ്രദമാണ്, കാരണം അവ ബോക്സ് അതിരുകൾ അനുസരിച്ചല്ല, മറിച്ച് ടെക്സ്റ്റ് അനുസരിച്ച് അലൈൻ ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു.

align-self ഉപയോഗിച്ച് മാറ്റങ്ങൾ വരുത്തുന്നു

ഒരു പ്രത്യേക ഐറ്റം മറ്റുള്ളവയിൽ നിന്ന് വ്യത്യസ്തമായി പെരുമാറണമെന്ന് നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിലോ? അവിടെയാണ് align-self വരുന്നത്. ഒരു പ്രത്യേക ഫ്ലെക്സ് ഐറ്റത്തിൽ പ്രയോഗിക്കുമ്പോൾ, അത് ആ ഐറ്റത്തിന് വേണ്ടി കണ്ടെയ്‌നറിൻ്റെ align-items പ്രോപ്പർട്ടിയെ മറികടക്കുന്നു. ഇത് align-items-ൻ്റെ എല്ലാ മൂല്യങ്ങളും സ്വീകരിക്കുന്നു (`auto` ഉൾപ്പെടെ, ഇത് കണ്ടെയ്‌നറിൻ്റെ മൂല്യത്തിലേക്ക് പുനഃസ്ഥാപിക്കുന്നു).

ഉദാഹരണം: align-items: center ഉപയോഗിച്ച് മധ്യഭാഗത്ത് ക്രമീകരിച്ചിരിക്കുന്ന ഒരു നിര കാർഡുകൾ സങ്കൽപ്പിക്കുക. ഒരു "ഫീച്ചേർഡ്" കാർഡിന് align-self: stretch; പ്രയോഗിച്ച് അതിനെ മറ്റുള്ളവയേക്കാൾ ഉയരമുള്ളതാക്കി വേറിട്ടു നിർത്താൻ നിങ്ങൾക്ക് കഴിയും.

അധികം ശ്രദ്ധിക്കപ്പെടാത്ത ഹീറോ: align-content ഉപയോഗിച്ച് അഡ്വാൻസ്ഡ് ഡിസ്ട്രിബ്യൂഷൻ

ഇത് ഫ്ലെക്സ്ബോക്സിലെ ഏറ്റവും തെറ്റിദ്ധരിക്കപ്പെട്ട പ്രോപ്പർട്ടികളിലൊന്നാണ്, ഇതിൽ വൈദഗ്ദ്ധ്യം നേടുന്നത് അഡ്വാൻസ്ഡ് കഴിവിൻ്റെ അടയാളമാണ്. align-items-മായുള്ള ഇതിൻ്റെ സാമ്യം ഒരു സാധാരണ ആശയക്കുഴപ്പമാണ്.

ഇവിടെയാണ് നിർണായക നിയമം: നിങ്ങളുടെ ഫ്ലെക്സ് ഐറ്റംസ് എല്ലാം ഒരൊറ്റ ലൈനിലായിരിക്കുമ്പോൾ align-content-ന് ഒരു ഫലവുമില്ല. നിങ്ങൾക്ക് ഒരു മൾട്ടി-ലൈൻ ഫ്ലെക്സ് കണ്ടെയ്‌നർ ഉള്ളപ്പോൾ മാത്രമേ ഇത് പ്രവർത്തിക്കൂ (അതായത്, നിങ്ങൾ flex-wrap: wrap; സജ്ജീകരിച്ചിരിക്കുകയും ഐറ്റംസ് പുതിയ ലൈനുകളിലേക്ക് മാറിയിരിക്കുകയും ചെയ്യുമ്പോൾ).

ഇതിനെ ഇങ്ങനെ ചിന്തിക്കുക:

• align-items ഐറ്റംസിനെ അവയുടെ ലൈനിനുള്ളിൽ അലൈൻ ചെയ്യുന്നു.
• align-content ലൈനുകളെത്തന്നെ കണ്ടെയ്‌നറിനുള്ളിൽ അലൈൻ ചെയ്യുന്നു. ഇത് ഐറ്റംസിൻ്റെ വരികൾക്കിടയിലുള്ള ക്രോസ് ആക്സിസിലെ സ്പേസ് വിതരണത്തെ നിയന്ത്രിക്കുന്നു.

ഇത് അടിസ്ഥാനപരമായി justify-content പോലെ പ്രവർത്തിക്കുന്നു, പക്ഷേ ക്രോസ് ആക്സിസിന് വേണ്ടിയാണിത്. ഇതിൻ്റെ മൂല്യങ്ങൾ മിക്കവാറും സമാനമാണ്:

• align-content: flex-start; (ഡിഫോൾട്ട്): എല്ലാ ലൈനുകളും കണ്ടെയ്‌നറിൻ്റെ തുടക്കത്തിലേക്ക് ചേർത്ത് വെക്കുന്നു.
• align-content: flex-end;: എല്ലാ ലൈനുകളും അവസാനത്തിലേക്ക് ചേർത്ത് വെക്കുന്നു.
• align-content: center;: എല്ലാ ലൈനുകളും മധ്യഭാഗത്തേക്ക് ചേർത്ത് വെക്കുന്നു.
• align-content: space-between;: ആദ്യത്തെ ലൈൻ തുടക്കത്തിലും അവസാനത്തെ ലൈൻ അവസാനത്തിലുമായിരിക്കും, സ്പേസ് ലൈനുകൾക്കിടയിൽ തുല്യമായി വിതരണം ചെയ്യപ്പെടുന്നു.
• align-content: space-around;: ഓരോ ലൈനിനും ചുറ്റും തുല്യമായ സ്പേസ് നൽകുന്നു.
• align-content: space-evenly;: ഓരോ ലൈനിനും ഇടയിലുള്ള സ്പേസ് ഒരുപോലെയായിരിക്കും.
• align-content: stretch;: ശേഷിക്കുന്ന സ്പേസ് എടുക്കാൻ ലൈനുകൾ നീളുന്നു.

ഉപയോഗം: ഐറ്റംസ് റാപ്പ് ചെയ്യുന്ന ഒരു ഫോട്ടോ ഗാലറി സങ്കൽപ്പിക്കുക. കണ്ടെയ്‌നറിന് ഒരു നിശ്ചിത ഉയരമുണ്ടെങ്കിൽ, അധിക ലംബമായ സ്പേസ് അവശേഷിച്ചേക്കാം. ഡിഫോൾട്ടായി, ഈ സ്പേസ് താഴെയായി കാണപ്പെടും. align-content: space-between; അല്ലെങ്കിൽ align-content: center; ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങളുടെ ഫോട്ടോകളുടെ മുഴുവൻ ഗ്രിഡിൻ്റെയും ലംബമായ വിതരണം നിയന്ത്രിക്കാൻ കഴിയും, ഇത് കൂടുതൽ പ്രൊഫഷണലായി തോന്നുന്ന ഒരു ലേഔട്ട് സൃഷ്ടിക്കുന്നു.

ഡൈനാമിക് സൈസിംഗും ഡിസ്ട്രിബ്യൂഷനും: flex ഷോർട്ട്ഹാൻഡ്

സ്റ്റാറ്റിക് ലേഔട്ടുകൾ വിരളമാണ്. ഡൈനാമിക് ഉള്ളടക്കവും ലഭ്യമായ സ്പേസും കൈകാര്യം ചെയ്യാനുള്ള കഴിവിൽ നിന്നാണ് ഫ്ലെക്സ്ബോക്സിൻ്റെ യഥാർത്ഥ ശക്തി വരുന്നത്. ഇത് മൂന്ന് പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് നിയന്ത്രിക്കപ്പെടുന്നു, സാധാരണയായി flex ഷോർട്ട്ഹാൻഡ് വഴി സജ്ജീകരിക്കുന്നു: flex-grow, flex-shrink, flex-basis.

1. flex-basis: ആരംഭ പോയിൻ്റ്

വളരുകയോ ചുരുങ്ങുകയോ ചെയ്യുന്നതിന് മുമ്പ്, ഫ്ലെക്സ്ബോക്സിന് ഓരോ ഐറ്റത്തിനും ഒരു പ്രാരംഭ വലുപ്പം ആവശ്യമാണ്. ഇതാണ് flex-basis-ൻ്റെ ജോലി. ഇത് മെയിൻ ആക്സിസിൽ ഒരു എലമെൻ്റിൻ്റെ ഡിഫോൾട്ട് വലുപ്പം നിർവചിക്കുന്നു.

• ഒരു നിർദ്ദിഷ്ട നീളത്തിലേക്ക് (ഉദാ. 200px അല്ലെങ്കിൽ 10rem) സജ്ജീകരിച്ചാൽ, അത് ഐറ്റത്തിൻ്റെ പ്രാരംഭ വലുപ്പമായി മാറും.
• auto ആയി സജ്ജീകരിച്ചാൽ, അത് ഐറ്റത്തിൻ്റെ `width` അല്ലെങ്കിൽ `height` പ്രോപ്പർട്ടി പരിശോധിക്കും. ഒന്നുമില്ലെങ്കിൽ, ഐറ്റത്തിൻ്റെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി വലുപ്പം നിർണ്ണയിക്കും.
• 0 ആയി സജ്ജീകരിച്ചാൽ, ഐറ്റത്തിന് പ്രാരംഭ വലുപ്പമുണ്ടാകില്ല, അതിൻ്റെ അന്തിമ വലുപ്പം അതിൻ്റെ flex-grow അനുപാതം അനുസരിച്ച് മാത്രമായിരിക്കും.

മികച്ച രീതി: ഒരു ഫ്ലെക്സ് സന്ദർഭത്തിൽ `width`-ന് പകരം flex-basis ഉപയോഗിക്കുന്നതാണ് നല്ലത്, കാരണം ഇത് മെയിൻ ആക്സിസിൻ്റെ പശ്ചാത്തലത്തിൽ ഐറ്റത്തിൻ്റെ വലുപ്പം നിർവചിക്കുന്നതിൽ കൂടുതൽ വ്യക്തത നൽകുന്നു.

2. flex-grow: പോസിറ്റീവ് സ്പേസ് ഉപയോഗിക്കുന്നു

ഫ്ലെക്സ് കണ്ടെയ്‌നറിന് അതിൻ്റെ മെയിൻ ആക്സിസിൽ അധിക സ്പേസ് ഉള്ളപ്പോൾ, ആ സ്പേസ് എങ്ങനെ വിതരണം ചെയ്യണമെന്ന് flex-grow നിർണ്ണയിക്കുന്നു. ഇത് യൂണിറ്റില്ലാത്ത ഒരു അനുപാതമാണ്.

• ഡിഫോൾട്ട് മൂല്യം 0 ആണ്, അതായത് ഐറ്റംസ് അധിക സ്പേസ് നിറയ്ക്കാൻ വളരുകയില്ല.
• എല്ലാ ഐറ്റംസിനും flex-grow: 1 ഉണ്ടെങ്കിൽ, അധിക സ്പേസ് അവയ്ക്കിടയിൽ തുല്യമായി വിതരണം ചെയ്യപ്പെടും.
• ഒരു ഐറ്റത്തിന് flex-grow: 2 ഉം മറ്റൊന്നിന് flex-grow: 1 ഉം ഉണ്ടെങ്കിൽ, ആദ്യത്തെ ഐറ്റത്തിന് രണ്ടാമത്തേതിനേക്കാൾ ഇരട്ടി അധിക സ്പേസ് ലഭിക്കും.

3. flex-shrink: നെഗറ്റീവ് സ്പേസ് (ഓവർഫ്ലോ) കൈകാര്യം ചെയ്യുന്നു

ഇത് `flex-grow`-ൻ്റെ എതിരാളിയാണ്. കണ്ടെയ്‌നറിൽ എല്ലാ ഐറ്റംസിനെയും അവയുടെ `flex-basis`-ൽ ഉൾക്കൊള്ളാൻ ആവശ്യമായ സ്പേസ് ഇല്ലാത്തപ്പോൾ, അവ ചുരുങ്ങേണ്ടതുണ്ട്. അവ എത്രത്തോളം ചുരുങ്ങണമെന്ന് flex-shrink നിയന്ത്രിക്കുന്നു.

• ഡിഫോൾട്ട് മൂല്യം 1 ആണ്, അതായത് ഓവർഫ്ലോ തടയാൻ എല്ലാ ഐറ്റംസും ഡിഫോൾട്ടായി ആനുപാതികമായി ചുരുങ്ങുന്നു.
• ഒരു ഐറ്റത്തിൽ flex-shrink: 0 സജ്ജീകരിച്ചാൽ, അത് ചുരുങ്ങുകയില്ല. അത് അതിൻ്റെ `flex-basis` വലുപ്പം നിലനിർത്തും, ഇത് കണ്ടെയ്‌നർ ഓവർഫ്ലോ ആകാൻ സാധ്യതയുണ്ട്. ലോഗോകൾ അല്ലെങ്കിൽ ബട്ടണുകൾ പോലുള്ള ഒരിക്കലും ചുരുക്കാൻ പാടില്ലാത്ത ഘടകങ്ങൾക്ക് ഇത് ഉപയോഗപ്രദമാണ്.

flex ഷോർട്ട്ഹാൻഡ്: എല്ലാം ഒരുമിപ്പിക്കുന്നു

flex പ്രോപ്പർട്ടി flex-grow, flex-shrink, flex-basis എന്നിവയുടെ ഒരു ഷോർട്ട്ഹാൻഡാണ്, ആ ക്രമത്തിൽ.

• flex: 0 1 auto; (ഡിഫോൾട്ട്): ഐറ്റത്തിന് വളരാൻ കഴിയില്ല, ചുരുങ്ങാൻ കഴിയും, അതിൻ്റെ അടിസ്ഥാനം അതിൻ്റെ width/height അല്ലെങ്കിൽ ഉള്ളടക്കം അനുസരിച്ച് നിർണ്ണയിക്കപ്പെടുന്നു.
• flex: 1; (flex: 1 1 0; എന്നതിൻ്റെ ഷോർട്ട്ഹാൻഡ്): വളരെ സാധാരണമായ ഒരു മൂല്യം. ഐറ്റത്തിന് വളരാനും ചുരുങ്ങാനും കഴിയും, അതിൻ്റെ പ്രാരംഭ വലുപ്പം 0 ആണ്. ഇത് ഫലപ്രദമായി ഐറ്റംസിനെ അവയുടെ flex-grow അനുപാതത്തെ മാത്രം അടിസ്ഥാനമാക്കി സ്പേസ് പങ്കിടാൻ സഹായിക്കുന്നു.
• flex: auto; (flex: 1 1 auto; എന്നതിൻ്റെ ഷോർട്ട്ഹാൻഡ്): ഐറ്റത്തിന് വളരാനും ചുരുങ്ങാനും കഴിയും, അതിൻ്റെ അടിസ്ഥാനം അതിൻ്റെ ഉള്ളടക്കം അനുസരിച്ച് നിർണ്ണയിക്കപ്പെടുന്നു. ഇത് ഐറ്റംസിനെ അവയുടെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി വ്യത്യസ്ത വലുപ്പത്തിലാക്കാൻ അനുവദിക്കുന്നു, എന്നാൽ അധിക സ്പേസ് ഫ്ലെക്സിബിളായി ആഗിരണം ചെയ്യാനും സാധിക്കുന്നു.
• flex: none; (flex: 0 0 auto; എന്നതിൻ്റെ ഷോർട്ട്ഹാൻഡ്): ഐറ്റം പൂർണ്ണമായും ഫ്ലെക്സിബിൾ അല്ല. ഇതിന് വളരാനോ ചുരുങ്ങാനോ കഴിയില്ല.

പ്രായോഗിക ഉപയോഗങ്ങളും അഡ്വാൻസ്ഡ് സാഹചര്യങ്ങളും

സാഹചര്യം 1: സ്റ്റിക്കി ഫൂട്ടർ (ഹോളി ഗ്രെയിൽ ലേഔട്ട്)

ഒരു ക്ലാസിക് വെബ് ഡിസൈൻ പ്രശ്നം: ഉള്ളടക്കം കുറവാണെങ്കിലും ഒരു ഫൂട്ടറിനെ പേജിൻ്റെ താഴെ ഒട്ടിച്ചുനിർത്തുന്നത് എങ്ങനെ, എന്നാൽ ഉള്ളടക്കം നീളമുള്ളപ്പോൾ സ്വാഭാവികമായി താഴേക്ക് തള്ളപ്പെടുന്നത് എങ്ങനെ.

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Viewport Height */
}

.main-content {
  flex-grow: 1; /* or flex: 1; */
}

പ്രധാന പേജ് കണ്ടെയ്‌നർ ഒരു കോളം അടിസ്ഥാനമാക്കിയുള്ള ഫ്ലെക്സ്ബോക്സ് ആക്കുകയും പ്രധാന ഉള്ളടക്ക ഏരിയക്ക് flex-grow: 1 നൽകുകയും ചെയ്യുന്നതിലൂടെ, ലഭ്യമായ എല്ലാ ലംബമായ സ്പേസും ഉപയോഗിക്കാൻ നമ്മൾ അതിനോട് പറയുന്നു, ഇത് ഫൂട്ടറിനെ വ്യൂപോർട്ടിൻ്റെ താഴേക്ക് തള്ളുന്നു.

സാഹചര്യം 2: ഗ്രൂപ്പുകളെ വിഭജിക്കാൻ ഓട്ടോ മാർജിനുകൾ

ഇടതുവശത്ത് ഒരു ലോഗോയും വലതുവശത്ത് ഒരു കൂട്ടം ലിങ്കുകളുമുള്ള ഒരു നാവിഗേഷൻ ബാർ എങ്ങനെ നിർമ്മിക്കാം? ലോഗോ ഒരു ഫ്ലെക്സ് ഐറ്റം ആണെങ്കിൽ justify-content: space-between പ്രവർത്തിക്കും, എന്നാൽ വലതുവശത്ത് ഒന്നിലധികം ഐറ്റംസ് ഉണ്ടെങ്കിലോ?

ഫ്ലെക്സ്ബോക്സിലെ ഓട്ടോ മാർജിനുകളുടെ മാന്ത്രികതയാണ് ഇതിന് പരിഹാരം.

.navbar {
  display: flex;
}

.logo {
  /* No special properties needed */
}

.nav-links {
  margin-left: auto;
}

ഒരു ഫ്ലെക്സ് കണ്ടെയ്‌നറിൽ, ഒരു ഓട്ടോ മാർജിൻ പ്രയോഗിക്കുന്ന ദിശയിലുള്ള എല്ലാ ലഭ്യമായ സ്പേസും ഉപയോഗിക്കും. നാവിഗേഷൻ ലിങ്കുകളുടെ ഗ്രൂപ്പിൽ margin-left: auto സജ്ജീകരിക്കുന്നതിലൂടെ, അത് ലോഗോയ്ക്കും ലിങ്കുകൾക്കുമിടയിൽ ഒരു ഫ്ലെക്സിബിൾ, ശൂന്യമായ ഇടം സൃഷ്ടിക്കുന്നു, ലിങ്കുകളെ വലതുവശത്തേക്ക് തള്ളുന്നു.

സാഹചര്യം 3: മീഡിയ ഒബ്ജക്റ്റ്

ഒരു സാധാരണ യുഐ പാറ്റേണിൽ ഒരു വശത്ത് ഒരു ചിത്രമോ ഐക്കണോ മറുവശത്ത് വിവരണാത്മകമായ ടെക്സ്റ്റും ഉണ്ടാകും. ടെക്സ്റ്റ് ശേഷിക്കുന്ന എല്ലാ സ്പേസും എടുക്കുകയും ഭംഗിയായി റാപ്പ് ചെയ്യുകയും വേണം.

.media-object {
  display: flex;
  align-items: flex-start; /* Aligns image and text to the top */
}

.media-image {
  margin-right: 1rem;
  flex-shrink: 0; /* Prevents the image from being squished */
}

.media-body {
  flex-grow: 1; /* Takes up all remaining horizontal space */
}

ഇവിടെ, ടെക്സ്റ്റ് കണ്ടെയ്‌നറിലെ flex-grow: 1 ആണ് പ്രധാനം. ചിത്രം എത്ര വീതിയുള്ളതാണെങ്കിലും, ടെക്സ്റ്റ് കണ്ടെയ്‌നറിലെ ശേഷിക്കുന്ന വീതി മുഴുവൻ നിറയ്ക്കാൻ വികസിക്കുമെന്ന് ഇത് ഉറപ്പാക്കുന്നു.

ഉപസംഹാരം: അലൈൻമെൻ്റിനപ്പുറം, ഉദ്ദേശ്യപൂർവമായ ലേഔട്ടിലേക്ക്

ഫ്ലെക്സ്ബോക്സിൽ വൈദഗ്ദ്ധ്യം നേടുക എന്നതിനർത്ഥം കാര്യങ്ങൾ മധ്യഭാഗത്ത് ക്രമീകരിക്കുന്നതിനപ്പുറം പോകുക എന്നതാണ്. ഇത് ആക്സിസുകൾ തമ്മിലുള്ള പരസ്പരബന്ധം, സ്പേസ് വിതരണത്തിൻ്റെ യുക്തി, ഐറ്റം വലുപ്പത്തിൻ്റെ ഫ്ലെക്സിബിലിറ്റി എന്നിവ മനസ്സിലാക്കുന്നതിനെക്കുറിച്ചാണ്. മൾട്ടി-ലൈൻ ലേഔട്ടുകൾക്കായി align-content, ഡൈനാമിക് സൈസിംഗിനായി flex ഷോർട്ട്ഹാൻഡ്, ഓട്ടോ മാർജിനുകൾ പോലുള്ള ശക്തമായ പാറ്റേണുകൾ എന്നിവയെക്കുറിച്ച് ഉറച്ച ധാരണ നേടുന്നതിലൂടെ, നിങ്ങൾക്ക് കാഴ്ചയിൽ ആകർഷകവും എന്നാൽ കരുത്തുറ്റതും പ്രതികരിക്കുന്നതും സെമാൻ്റിക്കലായി വൃത്തിയുള്ളതുമായ ലേഔട്ടുകൾ നിർമ്മിക്കാൻ കഴിയും.

അടുത്ത തവണ നിങ്ങൾ ഒരു സങ്കീർണ്ണമായ ലേഔട്ട് വെല്ലുവിളി നേരിടുമ്പോൾ, ഫ്ലോട്ടുകൾക്കോ സങ്കീർണ്ണമായ പൊസിഷനിംഗ് ഹാക്കുകൾക്കോ വേണ്ടി ശ്രമിക്കുന്ന പ്രവണതയെ ചെറുക്കുക. പകരം, സ്വയം ചോദിക്കുക: സ്പേസിൻ്റെ ഉദ്ദേശ്യപൂർവമായ വിതരണത്തിലൂടെ ഇത് പരിഹരിക്കാൻ കഴിയുമോ? ഉത്തരം, മിക്കപ്പോഴും, സിഎസ്എസ് ഫ്ലെക്സ്ബോക്സിൻ്റെ അഡ്വാൻസ്ഡ് കഴിവുകൾക്കുള്ളിൽ കാണപ്പെടും.